<template>
  <div class="second-list-wrapper">
    <ul class="second-list grid text-sm">
      <li class="menu-item">
        <a href="#" class="">
          <div class="overflow-hidden rounded-[14px]">
            <img
              class="transform rounded-[14px] transition-transform duration-300 hover:scale-110"
              width="300"
              height="175"
              src="~/assets/images/index/phoenix-menu-img-e1721298121993-300x175.webp"
              decoding="async"
            />
          </div>

          <!-- tag -->
          <div class="hot-tag mb-2 flex items-center gap-1 px-2">
            <fire></fire>
            NEW
          </div>
          <div class="mb-2">Discover Phoenix by Leonardo.Ai</div>
          <div class="text-xs font-normal text-slate-300">
            Our first foundational model is here, changing everything you know about AI image generation.
          </div>
        </a>
      </li>
      <!-- 右侧内容 -->
      <li class="menu-item flex flex-col gap-y-2">
        <a href="" class="link-item p-2">
          <div class="p-y-0.5 text-sm text-white">AI Art Generator</div>
          <div class="text-xs font-normal text-slate-300">Generate art, illustrations and more with prompts.</div>
        </a>
        <a href="" class="link-item p-2">
          <div class="p-y-0.5 text-sm text-white">AI Video Generator</div>
          <div class="text-xs font-normal text-slate-300">
            Turn your images into stunning animations and explore a new dimension of video storytelling.
          </div>
        </a>
        <a href="" class="link-item p-2">
          <div class="p-y-0.5 text-sm text-white">Transparent PNG Generator</div>
          <div class="text-xs font-normal text-slate-300">Instantly generate true background-free visual elements</div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script setup>
// feature 的二级菜单
import fire from '~/assets/images/svg/fire.vue'
</script>

<style lang="scss" scoped>
.second-list-wrapper {
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(100px);
  // 自动将内容撑开，否则必须写固定像素或者默认取父元素的宽度（父元素宽度明显是不够的）
  min-width: max-content;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.second-list {
  // 通过这个增加与顶部的距离-本质还是第二层的容器高度。避免通过外出的 transform: translateY(12px) 产生的闪烁
  margin-top: 12px;
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
  border: 2px solid #171b29;
  background-image: linear-gradient(111deg, #020305 0%, #070a0f 100%);
  border-radius: 20px;

  grid-template-columns: 228px 255px;
  grid-gap: 60px 25px;
}

.hot-tag {
  background-color: #6a6afb;
  width: max-content;
  border-radius: 70px;
  margin-top: 12px;
}

// 预先让内容在 pad 屏幕移动 -50% 否则在展示的时候会出现 x,y都在移动，是斜向移动的效果
@media screen and (max-width: 1024px) {
  .second-list-wrapper {
    transform: translate(-50%, 100px);
  }
}
</style>
